<div id="charge_under_line">
    <div class="charge_under_line">

        <!--搜索栏-->
        <div class="searchBox">
            <el-input style="width: 220px;" readonly onclick="showJgTree();" v-model="jigouName" id="jgSel" placeholder="请选择机构"></el-input>
            <div id="jgFeeUserContent" class="jgFeeUserContent" style="display: none;position: absolute;z-index: 1000;overflow: auto;background:#ffffff;">
                <ul id="jgFeeUserTree" class="ztree" style="margin-top:0; width:220px;"></ul>
            </div>
            <el-select
                    v-model="parameters.projectType"
                    @change="getPName"
                    placeholder="请选择项目类型"
                    style="width: 220px;margin-left: 20px;color: red">
                <el-option label="请选择项目类型" value=""></el-option>
                <el-option
                        v-for="item in pType"
                        :label="item.projectTypeName"
                        :value="item.projectTypeId" ></el-option>
            </el-select>
            <el-select v-model="parameters.project" placeholder="请选择收费项目" style="margin-left: 10px;">
                <el-option
                        v-for="item in pName"
                        :label="item.projectName"
                        :value="item.projectId">
                </el-option>
            </el-select>
            <el-input
                    placeholder="请输入用户名进行搜素"
                    v-model="parameters.searchContent"
                    style="width: 220px;margin-left: 20px;">
            </el-input>
            <el-button @click="searchFun" type="primary" icon="el-icon-search" style="margin-left: 20px">搜索</el-button>
        </div>
        <!--线下收费按钮-->
        <el-row type="flex" class="table_btn" justify="space-between">
            <!--<el-form :model="payTypeForm" :rules="rules" class="payTypeBox">-->
                <!--<el-form-item prop="payType">-->
                    <!--<el-select v-model="payTypeForm.payType" placeholder="请选择支付方式">-->
                        <!--<el-option label="请选择支付方式" value=""></el-option>-->
                        <!--<el-option label="POS" value="01"></el-option>-->
                        <!--<el-option label="现金" value="02"></el-option>-->
                    <!--</el-select>-->
                <!--</el-form-item>-->
            <!--</el-form>-->
            <el-col :span="12">
                <el-form :model="payTypeForm" :rules="rules" class="payTypeBox">
                    <el-form-item prop="payType">
                        <el-select v-model="payTypeForm.payType" placeholder="请选择支付方式">
                            <el-option label="请选择支付方式" value=""></el-option>
                            <el-option label="POS" value="01"></el-option>
                            <el-option label="现金" value="02"></el-option>
                        </el-select>
                    </el-form-item>
                </el-form>
            </el-col>
            <el-col :span="12" class="btnTypeSet">
                <el-button @click="pyaUnderLine" type="primary">线下收费</el-button>
            </el-col>
        </el-row>

        <el-table
                size="mini"
                :data="tableData"
                @row-click="handleRowHandle"
                style="width: 100%;cursor: pointer;"
                @selection-change="handleSelectionChange">
            <el-table-column
                    type="selection"
                    width="55">
            </el-table-column>
            <el-table-column
                    label="缴费编号"
                    prop="feeId"
                    align="center"
                    width="200">
            </el-table-column>
            <el-table-column
                    label="姓名"
                    prop="feeuUserName"
                    align="center"
                    width="160">
            </el-table-column>
            <el-table-column
                    label="应缴金额"
                    prop="totalAmt"
                    align="center"
                    width="160">
            </el-table-column>
            <el-table-column
                    label="实缴金额"
                    prop="factAmt"
                    align="center"
                    width="160">
            </el-table-column>
            <el-table-column
                    label="缴费状态"
                    prop="payStatus"
                    align="center"
                    width="160">
            </el-table-column>
            <el-table-column
                    label="缴费项目"
                    prop="projectName"
                    align="center"
                    width="200">
            </el-table-column>
        </el-table>

        <!-- 分页-->
        <div class="footerBox">
            <el-pagination
                    background
                    @current-change="handleCurrentChange"
                    layout="prev, pager, next"
                    :current-page.sync="currentPage"
                    :total="totalCount">
            </el-pagination>
        </div>
        <!--详情弹出框-->
        <el-dialog class="dialogDetails" title="缴费信息" :visible.sync="dialogChargeInfoVisible">
            <div class="info-template-content">
                <el-row class="item-row">
                    <el-col :span="5" style="color: #666">缴费流水号</el-col>
                    <el-col :span="19" style="color: #333">{{chargeInfo.payId}}</el-col>
                </el-row>
                <el-row class="item-row">
                    <el-col :span="5" style="color: #666">缴费人员</el-col>
                    <el-col :span="19" style="color: #333">{{chargeInfo.feeuUserName}}</el-col>
                </el-row>
                <el-row class="item-row">
                    <el-col :span="5" style="color: #666">所属机构</el-col>
                    <el-col :span="19" style="color: #333">{{chargeInfo.feeUserDept}}</el-col>
                </el-row>
                <el-row class="item-row">
                    <el-col :span="5" style="color: #666">缴费项目</el-col>
                    <el-col :span="19" style="color: #333">{{chargeInfo.projectName}}</el-col>
                </el-row>
                <el-row class="item-row">
                    <el-col :span="5" style="color: #666">应缴金额</el-col>
                    <el-col :span="19" style="color: #333">{{chargeInfo.totalAmt}}</el-col>
                </el-row>
                <el-row class="item-row">
                    <el-col :span="5" style="color: #666">实缴金额</el-col>
                    <el-col :span="19" style="color: #333">{{chargeInfo.factAmt}}</el-col>
                </el-row>
                <el-row class="item-row">
                    <el-col :span="5" style="color: #666">催缴次数</el-col>
                    <el-col :span="19" style="color: #333">{{chargeInfo.urgeCnt}}</el-col>
                </el-row>
                <el-row class="item-row">
                    <el-col :span="5" style="color: #666">提醒</el-col>
                    <el-col :span="19" style="color: #333">{{chargeInfo.isRemind}}</el-col>
                </el-row>
                <el-row class="item-row">
                    <el-col :span="5" style="color: #666">支付流水号</el-col>
                    <el-col :span="19" style="color: #333">{{chargeInfo.paySeq}}</el-col>
                </el-row>
                <el-row class="item-row">
                    <el-col :span="5" style="color: #666">支付时间</el-col>
                    <el-col :span="19" style="color: #333">{{chargeInfo.payDate}}</el-col>
                </el-row>
                <el-row class="item-row">
                    <el-col :span="5" style="color: #666">支付方式描述</el-col>
                    <el-col :span="19" style="color: #333">{{chargeInfo.payType}}</el-col>
                </el-row>
                <el-row class="item-row">
                    <el-col :span="5" style="color: #666">支付状态</el-col>
                    <el-col :span="19" style="color: #333">{{chargeInfo.payStatus}}</el-col>
                </el-row>
                <el-row class="item-row">
                    <el-col :span="5" style="color: #666">对账状态</el-col>
                    <el-col :span="19" style="color: #333">{{chargeInfo.isSettle}}</el-col>
                </el-row>
            </div>
            <!--底部按钮-->
            <!--<div slot="footer" class="dialog-footer">-->
                <!--<el-button @click="dialogChargeInfoVisible = false">取 消</el-button>-->
                <!--<el-button type="primary" @click="dialogChargeInfoVisible = false">确 定</el-button>-->
            <!--</div>-->
        </el-dialog>
    </div>
</div>
<!--[if IE]>
<script>
    goIEPage(IEVersion(),'${basePath}/underLineIE9');
</script>
<![endif]-->
<script>
    // 当前页机构zTree
    var jgSetting = {
        check: {
            enable: true,
//            chkStyle: "checkbox",
//            chkboxType: { "Y": "p", "N": "s" }
        },
        data: {
            simpleData: {
                enable: true,
//                rootId: 0
            }
        },
        callback: {
            beforeClick: beforeClickJg,
            onCheck: onCheckJg
        }
    };
    function beforeClickJg(treeId, treeNode) {
        var zTree = $.fn.zTree.getZTreeObj("jgFeeUserTree");
        zTree.checkNode(treeNode, !treeNode.checked, null, true);
        return false;
    }
    function onCheckJg(e, treeId, treeNode) {
        var jgTree = $.fn.zTree.getZTreeObj("jgFeeUserTree"),
            jgNodes = jgTree.getCheckedNodes(true),
            checkJg = '',
            jgVal = "";
        for (var i=0, l=jgNodes.length; i<l; i++) {
            jgVal += jgNodes[i].name + ",";
            if(!jgNodes[i].isParent){
                checkJg +=  jgNodes[i].id + ',';
            }
        }
        if (jgVal.length > 0 ) jgVal = jgVal.substring(0, jgVal.length-1);
        if (checkJg.length > 0 ) checkJg = checkJg.substring(0, checkJg.length-1);
        charge_under_line.jigouName = jgVal;
        charge_under_line.parameters.treeId = checkJg;
    }
    function showJgTree() {
        var cityObj = $("#jgSel");
        var cityOffset = $("#jgSel").offset();
        $("#jgFeeUserContent").slideDown("fast");

        $.post("${basePath}merchant/dept/togetDeptTree", function (json) {
            var treeObj = $.fn.zTree.init($("#jgFeeUserTree"), jgSetting, json.t);
            //默认展开所有节点
            //treeObj.expandAll(true);
        });
        $("body").bind("mousedown", onBodyDown);
    }
    function jgHideMenu() {
        $("#jgFeeUserContent").fadeOut("fast");
        $("body").unbind("mousedown", onBodyDown);
    }
    function onBodyDown(event) {
        if (!(event.target.id == "menuBtn" ||
            event.target.id == "jgSel" ||
            event.target.id == "jgFeeUserContent" ||
            $(event.target).parents("#jgFeeUserContent").length>0)) {
            jgHideMenu();
        }
    }

    var charge_under_line =
            new Vue({
                el: "#charge_under_line",
                data: {
                    jigouName:'',
                    tableData:[],//表格数据
                    pType:[], // 项目类型
                    pName:[], // 收费项目
                    // 详情
                    chargeInfo:{
                        payId:'', // 缴费编号
                        feeuUserName:'', // 用户姓名
                        feeUserDept:'', // 所属机构
                        projectName:'', // 收费项目
                        totalAmt:'', // 应缴金额
                        factAmt:'', // 实缴金额
                        payStatus:'', // 缴费状态04未缴费p-00已经缴费
                        urgeCnt:'', //催缴次数
                        isRemind:'',//提醒1提醒0不在提醒
                        paySeq:'',//支付流水号
                        payDate:'',//支付时间
                        payType:'',//支付方式描述
                        isSettle:''//是否已对账（0否/1是）
                    },
                    dialogChargeInfoVisible:false, // 详情弹窗（true:打开  false:关闭）
                    // 分页
                    currentPage: 1,
                    totalCount:'',
                    totalPage:'',
                    parameters:{
                        'currentPage':'',
                        'searchContent':'',
                        treeId:'',
                        projectType:'',
                        project:'',
                    },
                    multipleSelection: [],
                    payTypeForm: {
                        payType: '',
                    },
                    rules: {
                        payType: [
                            { required: true, message: '请选择支付方式', trigger: 'change' }
                        ]
                    }
                },
                methods: {
                    // 获取项目名称
                    getPName:function(){
                        var options= {'projectTypeId':this.parameters.projectType};
                        sendService('${basePath}/merchant/chargeUnderLine/getPaymentByType', options, function (resData) {
                            if(resData.status == 'success'){
                                charge_under_line.pName = resData.t;
                                // 注意`this`指向问题
                                if(charge_under_line.parameters.projectType == ''){
                                    charge_under_line.parameters.project = '';
                                }else if(charge_under_line.parameters.projectType != '') {
                                    if (charge_under_line.pName.length == 0) {
                                        charge_under_line.$message.warning('该项目类型下无收费项目');
                                        charge_under_line.parameters.project = '';
                                    } else {
                                        charge_under_line.parameters.project = charge_under_line.pName[0].projectId;
                                    }
                                }
                            }
                        });
                    },
                    // 分页加载数据currentPage
                    handleCurrentChange: function(currentPage){
                        Pagesearch(this,'${basePath}merchant/chargeUnderLine/getChargeUnderLineList1', this.parameters,currentPage,
                                function (resData) {
                                    if(resData.status == 'success'){
                                        // 成功后的callback
                                        resData.t.forEach(function (item) {
                                            if(item.payDate == null){

                                            } else {
                                                item.payDate = new Date(item.payDate).Format('yyyy-MM-dd');
                                            }
                                            if(item.isRemind == '1'){
                                                item.isRemind = '提醒';
                                            } else if(item.isRemind == '0'){
                                                item.isRemind = '不再提醒';
                                            }
                                            if(item.isSettle == '0'){
                                                item.isSettle = '未对账';
                                            } else if(item.isSettle == '1'){
                                                item.isSettle = '已对账';
                                            }
                                            if(item.payStatus == '04'){
                                                item.payStatus = '未缴费';
                                            }else if(item.payStatus == 'p-00'){
                                                item.payStatus = '已缴费';
                                            }
                                        });
                                    }
                                });
                    },
                    // 点击进入详情页
                    handleRowHandle:function (row,event,column) {
                        if(column.type === 'selection'){
                            return;
                        }else{
                            charge_under_line.dialogChargeInfoVisible = true;
                            charge_under_line.chargeInfo = row;
                        }
                    },
                    // 搜索
                    searchFun: function(){
                        if(this.parameters.searchContent == '' &&
                            this.parameters.treeId.length ===0 &&
                            this.parameters.projectType == '' &&
                            this.parameters.project == ''
                        ) {
                            reloadPage('${basePath}/merchant/chargeUnderLine/getChargeUnderLineList');
                        }else {
                            Pagesearch(this, '${basePath}/merchant/chargeUnderLine/getChargeUnderLineList1', this.parameters, 1,
                                function (resData) {
                                    if(resData.status == 'success'){
                                        // 成功后的callback
                                        resData.t.forEach(function (item) {
                                            if(item.payDate == null){

                                            } else {
                                                item.payDate = new Date(item.payDate).Format('yyyy-MM-dd');
                                            }
                                            if(item.isRemind == '1'){
                                                item.isRemind = '提醒';
                                            } else if(item.isRemind == '0'){
                                                item.isRemind = '不再提醒';
                                            }
                                            if(item.isSettle == '0'){
                                                item.isSettle = '未对账';
                                            } else if(item.isSettle == '1'){
                                                item.isSettle = '已对账';
                                            }
                                            if(item.payStatus == '04'){
                                                item.payStatus = '未缴费';
                                            }else if(item.payStatus == 'p-00'){
                                                item.payStatus = '已缴费';
                                            }
                                        });
                                    }
                            });
                        }
                    },
                    // 全选
                    handleSelectionChange:function(selection) {
                        this.multipleSelection = selection;
                    },
                    // 线下收费
                    pyaUnderLine: function () {
                        var multiplArr = new Array();
                        if(this.multipleSelection.length==0){
                            this.$message.warning('请选择缴费人员');
                        }else if(this.multipleSelection.length>=1){
                            for (var i=0;i<this.multipleSelection.length;i++) {
                                multiplArr.push(this.multipleSelection[i].payId);
                            }
                        }
                        var options={
                            "selectPayType" : this.payTypeForm.payType,
                            "payId" : multiplArr.join(",")
                        };
                        if(options.selectPayType == ''){
                            this.$message.warning('请选择支付方式');
                        }

                        if(options.selectPayType != '' && options.payId != ''){
                            var that = this;
                            that.$confirm('确定收费吗？','提示', {
                                confirmButtonText: '确定',
                                cancelButtonText: '取消',
                                type: 'warning'
                            }).then(function () {
                                sendService('${basePath}/merchant/chargeUnderLine/chargeUnder', options, function (resData) {
                                    if(resData.status == 'success'){
                                        charge_under_line.$message.success(resData.msg);
                                        reloadPage('${basePath}/merchant/chargeUnderLine/getChargeUnderLineList');
                                    }
                                });
                            }).catch(function () {
                                that.$message({
                                    type: 'info',
                                    message: '已取消操作'
                                });
                            })

                        }

                    },
                },
                created: function () {
                    // 从后台获取请求数据的URL
                    Pagesearch(this,'${basePath}/merchant/chargeUnderLine/getChargeUnderLineList1', null,1,function (resData) {
                        if(resData.status == 'success'){
                            // 成功后的callback
                            if(resData.t == null){}else{
                                resData.t.forEach(function (item) {
                                    if(item.payDate == null){

                                    } else {
                                        item.payDate = new Date(item.payDate).Format('yyyy-MM-dd');
                                    }
                                    if(item.isRemind == '1'){
                                        item.isRemind = '提醒';
                                    } else if(item.isRemind == '0'){
                                        item.isRemind = '不再提醒';
                                    }
                                    if(item.isSettle == '0'){
                                        item.isSettle = '未对账';
                                    } else if(item.isSettle == '1'){
                                        item.isSettle = '已对账';
                                    }
                                    if(item.payStatus == '04'){
                                        item.payStatus = '未缴费';
                                    }else if(item.payStatus == 'p-00'){
                                        item.payStatus = '已缴费';
                                    }
                                    if(item.payType == '01'){
                                        item.payType = 'POS';
                                    }else if(item.payType == '02'){
                                        item.payType = '现金';
                                    }
                                });
                            }


                        }
                    });

                    var options={};
                    sendService('${basePath}/merchant/mProject/getProjectType', options, function (resData) {
                        if(resData.status == 'success'){
                            charge_under_line.pType = resData.t;

                        }
                    });
                }
            });
</script>

<style scoped>
    .charge_under_line .searchBox{
        height: 60px;
        line-height: 60px;
        text-align: left;
        padding-left: 30px;
        margin-bottom: 10px;
        background: #fff;
    }
    .charge_under_line .payTypeBox .el-form-item{
        margin: 0;
    }
    /*.charge_under_line .payTypeBox{*/
        /*height: 60px;*/
        /*padding-right: 20px;*/
        /*margin-bottom: 10px;*/
        /*background: #fff;*/
        /*text-align: right;*/
    /*}*/
    .charge_under_line .table_btn{
        height: 60px;
        margin-bottom: 10px;
        background: #fff;
        padding: 10px 24px 0 30px;
    }
    .el-form-item__error{
        right: 130px;
    }
    .charge_under_line .footerBox{
        width: 100%;
        height: 50px;
        text-align: right;
        background-color: #fff;
        padding-top: 9px;
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        box-sizing: border-box;
    }
    .el-dialog__body{
        padding: 40px 0 40px 100px;
    }
    .el-dialog__header span {
        padding-left: 20px;
    }
    .el-dialog__headerbtn .el-dialog__close {
        color: #aaa;
        font-size: 22px;
    }
    .dialogDetails .el-dialog {
        overflow: hidden;
        -webkit-box-shadow: 0 0 16px rgba(0,0,0,0.5);
        -moz-box-shadow: 0 0 16px rgba(0,0,0,0.5);
        box-shadow: 0 0 16px rgba(0,0,0,0.5);
    }
    .el-dialog__header {
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        box-sizing: border-box;
        border-bottom: 1px solid rgba(255,68,68,1);
        width: 100%;
        position: absolute;
        left: 0px;
        top: 0px;
        background-color: #fff;
    }
    .el-dialog__body {
        padding-top: 75px;
    }
    .dialogDetails .el-dialog__body {
        padding: 50px 0 0 0;
    }
    .dialogDetails .info-template-content .el-row:nth-child(even) {
        background-color: #efefef;
    }
    .dialogDetails .item-row {
        height: 46px;
        line-height: 46px;
        font-size: 16px;
        padding-left: 100px;
    }
    .dialogDetails .item-row div:first-of-type {
        color: #aaa;
        text-align: left;
    }
    .dialogDetails .item-row div:last-of-type {
        color: #333;
        padding-left: 80px;
    }
    .dialogDetails .info-template-content .el-row:last-of-type {
        margin-bottom: 30px;
    }
    .btnTypeSet{
        text-align: right;
        margin-right: 16px;
    }
</style>
